<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>对象的基本使用(Basic usage of objects)</title>
  <!-- 
  对象是 JavaScript 中一种重要的数据结构，用于存储和管理相关数据和功能。
  1. 定义对象
  - 对象字面量：使用花括号  `{}`  来定义对象。
    let person = {
      name: "张三",
      age: 25,
      gender: "男"
    };

  - 使用构造函数：使用  `new`  关键字和构造函数创建对象。
    function Person(name, age, gender) {
      this.name = name;
      this.age = age;
      this.gender = gender;
    }

    let person1 = new Person("李四", 30, "男");

  2. 访问对象属性
  - 点语法：使用点  `.`  来访问对象的属性。
    console.log(person.name); // 输出: 张三
  - 方括号语法：使用方括号  `[]`  来访问对象的属性，适用于动态属性名。
    console.log(person["age"]); // 输出: 25

  3. 添加和修改属性
  - 添加属性：可以直接为对象添加新的属性。
    person.email = "zhangsan@example.com";
  - 修改属性：可以直接修改对象的现有属性。
    person.age = 26;

  4. 删除属性
  - 使用  `delete`  关键字删除对象的属性。
  delete person.gender;

  5. 方法
  - 定义方法：对象可以包含函数作为其属性，这些函数称为方法。
    let car = {
      brand: "丰田",
      drive: function() {
        console.log("汽车在行驶");
      }
    };

    car.drive(); // 输出: 汽车在行驶

  6. 遍历对象
  - 使用  `for...in`  循环遍历对象的属性。
    for (let key in person) {
      console.log(key + ": " + person[key]);
    }

  7. 对象的嵌套
  - 对象可以包含其他对象，形成嵌套结构。
    let company = {
      name: "某公司",
      employees: {
        manager: "王五",
        staff: ["赵六", "钱七"]
      }
    };

    console.log(company.employees.manager); // 输出: 王五

  8. 对象的克隆
  - 浅拷贝：使用  `Object.assign()`  进行浅拷贝。
      let clonePerson = Object.assign({}, person);
  - 深拷贝：使用  `JSON.parse()`  和  `JSON.stringify()`  进行深拷贝。
      let deepClonePerson = JSON.parse(JSON.stringify(person));

  总结
  JavaScript 对象是存储和组织数据的基本结构，具有灵活性和动态性。通过对象，开发者可以轻松地管理相关数据和功能。掌握对象的基本用法，包括定义、访问、修改、删除属性以及方法的使用，对于编写高效和可维护的 JavaScript 代码至关重要。
   -->
</head>
<body>

  <script>

    // 1. 定义对象
    let person = {
      name: "张三",
      age: 25,
      gender: "男"
    };

    // 2. 访问属性
    console.log(person.name); // 输出: 张三

    // 3. 修改属性
    person.age = 26;

    // 4. 添加属性
    person.email = "zhangsan@example.com";

    // 5. 删除属性
    delete person.gender;

    // 6. 使用方法
    let car = {
      brand: "丰田",
      drive: function() {
        console.log("汽车在行驶");
      }
    };

    car.drive(); // 输出: 汽车在行驶

    // 7. 嵌套对象
    let company = {
      name: "某公司",
      employees: {
        manager: "王五",
        staff: ["赵六", "钱七"]
      }
    }

    console.log(company.employees.manager); // 输出: 王五

    // 8. 对象的克隆
    let clonePerson = Object.assign({}, person);
    let deepClonePerson = JSON.parse(JSON.stringify(person));

    console.log("对象的克隆", clonePerson); // 输出: { name: "张三", age: 26, email: "zhangsan@example.com" }
    

    // 9. 对象的遍历
    for (let key in person) {
      console.log(key + ": " + person[key]);
    }

    // 10. 对象的比较
    let person1 = { name: "张三", age: 25 };
    let person2 = { name: "张三", age: 25 };

    console.log(person1 === person2); // 输出: false

    // 11. 对象的深拷贝和浅拷贝
    let person3 = { name: "张三", age: 25, address: { city: "北京" } };
    let person4 = { ...person3 };

    person4.address.city = "上海";
    console.log(person3.address.city); // 输出: 上海

    // 12. 对象的解构赋值
    let { name, age } = person;
    console.log(name, age); // 输出: 张三 26

    // 13. 对象的扩展运算符
    let person5 = { name: "张三", age: 26 };
    let person6 = { ...person5, email: "zhangsan@example.com" };
    console.log(person6); // 输出: { name: "张三", age: 26, email: "zhangsan@example.com" }

    // 14. 对象的属性删除
    delete person.name;
    console.log(person); // 输出: { age: 26, email: "zhangsan@example.com" }

    // 15. 对象的属性检测
    console.log("name" in person); // 输出: false
    console.log("age" in person); // 输出: true

    // 16. 对象创建的多种方式
    let person7 = new Object();
    let person8 = Object.create(null);
    let person9 = Object.assign({}, person);
    let person10 = { ...person };

    // 17. 对象的序列化和反序列化
    let person11 = { name: "张三", age: 26 };
    let json = JSON.stringify(person11);

    let person12 = JSON.parse(json);
    console.log(person12); // 输出: { name: "张三", age: 26 }

    // 18. 对象的属性描述符
    let person13 = { name: "张三", age: 26 };
    Object.defineProperty(person13, "name", {
      writable: false,
      configurable: false,
    });

    person13.name = "李四";
    console.log(person13.name); // 输出: 张三

    // 19. 对象的冻结
    let person14 = { name: "张三", age: 26 };
    Object.freeze(person14);

    person14.name = "李四";
    console.log(person14.name); // 输出: 张三

    // 20. 对象方括号使用
    let person15 = { name: "张三", age: 26, "fn ": function() { console.log("对象方括号使用 fn");
     } };
    console.log(person15["name"]); // 输出: 张三
    console.log(person15["age"]); // 输出: 26
    person15["fn "](); // 输出: 对象方括号使用 fn

  </script>
  
</body>
</html>